<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <el-card class="margin">
      <el-row>
        <el-button type="danger" class="add" @click="addforms"
          >新增模板</el-button
        >
      </el-row>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column prop="templateType" label="模板类型" min-width="180">
          <template v-slot="{ row }">
            <span v-if="row.templateType === 1">同城寄</span>
            <span v-else-if="row.templateType === 2">省内寄</span>
            <span v-else-if="row.templateType === 3">经济区互寄</span>
            <span v-else>跨省</span>
          </template>
        </el-table-column>
        <el-table-column prop="transportType" label="运送类型" min-width="180">
          <template v-slot="{ row }">
            <span v-if="row.transportType === 1">普快</span>
            <span v-else>特快</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="associatedCityList"
          min-width="180"
          label="关联城市"
        >
          <template v-slot="{ row }">
            <span>{{ list(row.associatedCityList) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="firstWeight" label="首重" min-width="170">
        </el-table-column>
        <el-table-column prop="continuousWeight" label="续重" min-width="170">
        </el-table-column>
        <el-table-column
          prop="lightThrowingCoefficient"
          label="轻抛系数"
          width="170"
        >
        </el-table-column>
        <el-table-column label="操作" min-width="180">
          <template v-slot="{ row }">
            <el-button
              size="mini"
              type="text"
              style="margin-left: -103px"
              @click="editRows(row)"
              >编辑</el-button
            >
            <el-divider direction="vertical"></el-divider>
            <el-button
              size="mini"
              type="text"
              style="color:red"
              @click="delRows(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <FreightAdd
        ref="FreightAdd"
        :show-dialog.sync="showDialog"
        :show-title="showTitle"
        @random="random"
      ></FreightAdd>
    </el-card>
  </div>
</template>

<script>
import { freightManageList, freightManageDelete } from '@/api/transit'
import FreightAdd from './components/freight-add.vue'
export default {
  components: {
    FreightAdd
  },
  data() {
    return {
      showDialog: false,
      showTitle: '',
      tableData: [] // 列表
    }
  },
  created() {
    this.random()
  },
  methods: {
    // 渲染列表
    async random() {
      const { data } = await freightManageList()
      this.tableData = data
    },
    async addforms() {
      this.showDialog = true
      this.showTitle = '新增模板'
    },
    // 编辑回显数据
    async editRows(row) {
      this.showTitle = '编辑模板'
      await this.$refs.FreightAdd.editRows(row)
      this.showDialog = true
    },
    // 删除
    delRows(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          freightManageDelete(id)
          setTimeout(() => {
            this.random()
          }, 200)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    list(arr) {
      const result = arr.map(item => {
        if (item == '1') {
          return '全国'
        } else if (item == '2') {
          return '京津冀'
        } else if (item == '3') {
          return '江浙沪'
        } else if (item == '4') {
          return '川渝'
        } else if (item == '5') {
          return '黑吉辽'
        }
      })
      return result.join(',')
    }
  }
}
</script>
<style lang="scss" scoped rel="stylesheet/scss">
.margin {
  margin: 20px 20px 70px;
  border-radius: 5px;
}
.waybill-list {
  .el-dialog__wrapper {
    ::v-deep .el-dialog__body {
      padding-left: 0px;
    }
  }
}
::v-deep .add {
  // margin-top: 20px;
  margin-left: 1px;
  margin-bottom: 20px;
}
.dw {
  font-style: normal;
  color: #000;
  line-height: 40px;
  padding-right: 10px;
}
</style>
